import { useState, useImperativeHandle, forwardRef } from 'react'
import { LinearGradient } from 'expo-linear-gradient'
import { View, Text, Image, StyleSheet } from 'react-native'
import HomeCardSwiper from './homeCardSwiper'
import GoodCard from './goodCard'
import { flexCol } from '../../assets/style/common'
import { GoodsData, GoodsDataItem } from '../../assets/data/data'
import VideoWrap from './videoWrap'
import GuessFavor from './guessFavor'
type GoodsDataType = {
  type: 'goodCard' | 'guessFavor' | 'videoCard'
} & GoodsDataItem
const GoodsDataWithType: GoodsDataType[] = GoodsData.map(item => ({
  ...item,
  type: 'goodCard',
}))
const leftInit = GoodsDataWithType.slice(0, GoodsDataWithType.length / 2)
leftInit.splice(2, 0, { type: 'guessFavor', id: Date.now(), sale: 0, price: 0 })
const rightInit = GoodsDataWithType.slice(
  GoodsDataWithType.length / 2,
  GoodsDataWithType.length,
)
rightInit.splice(1, 0, { type: 'videoCard', id: 2, sale: 0, price: 0 })
interface ListWrapProp {
  onlyGoodsList?: Boolean
}
export default forwardRef(function ListWrap(props: ListWrapProp, ref) {
  const { onlyGoodsList = false } = props
  const [leftList, setLeftList] = useState(leftInit)
  const [rightList, setRightList] = useState(rightInit)
  // const [leftY, setLeftY] = useState(0)
  // const [rightY, setRightY] = useState(0)

  useImperativeHandle(
    ref,
    () => ({
      loadMore: loadMore,
    }),
    [],
  )
  function loadMore() {
    const left = [...GoodsDataWithType],
      right = [...GoodsDataWithType]
    const addLGoods: typeof GoodsDataWithType = [],
      addRGoods: typeof GoodsDataWithType = []
    let i = 5
    while (i > 0) {
      let random = 10 - 5 + i
      const leftIndex = Math.floor(Math.random() * random)
      const rightIndex = Math.floor(Math.random() * random)
      addLGoods.push(...left.splice(leftIndex, 1))
      addRGoods.push(...right.splice(rightIndex, 1))
      i--
    }
    setLeftList(list => list.concat(addLGoods))
    setRightList(list => list.concat(addRGoods))
  }
  // function onGoodsLayout(
  //   e: { width: number; height: number },
  //   id: number,
  //   side: 'right' | 'left',
  // ) {
  //   // const y = e.nativeEvent.layout.height + e.nativeEvent.layout.y
  //   const y = e.height + 0
  //   if (side ==='left') {
  //     if (leftList[leftList.length - 1].id ===id) {
  //       setLeftY(y)
  //     }
  //   } else {
  //     if (rightList[rightList.length - 1].id ===id) {
  //       setRightY(y)
  //     }
  //   }
  // }
  function card(item: GoodsDataType, key: any) {
    switch (item.type) {
      case 'goodCard':
        return (
          <GoodCard
            // onLayout={e => onGoodsLayout(e, item.id, 'left')}
            key={key}
            source={item.cover}
            title={item.title}
            price={item.price + ''}
            sale={item.sale}
            interDiscount={item.interDiscount}
          />
        )
      case 'guessFavor':
        return <GuessFavor key={key} />
      case 'videoCard':
        return (
          <VideoWrap
            author="Admin lingnu"
            title="小王子与玫瑰花园"
            key={key}
            like={321}
            cover={require('../../assets/images/video1.jpg')}
          />
        )
    }
  }
  return (
    <View style={flexCol(listStyles.listWrap)}>
      <View style={listStyles.list}>
        {!onlyGoodsList && <HomeCardSwiper />}
        {leftList.map((item, key) => card(item, key))}
      </View>
      <View style={listStyles.sperate} />
      <View style={listStyles.list}>
        {!onlyGoodsList && (
          <>
            <View style={listStyles.r1}>
              <Image
                style={listStyles.r1Img}
                source={require('../../assets/coverImg/goods2.png')}
              />
              <LinearGradient
                colors={['#fed66f', '#fbce6a']}
                style={listStyles.r1TitWrap}
                start={{ x: 0.4, y: 0.4 }}
                end={{ x: 0.8, y: 0.8 }}
              >
                <Text style={listStyles.r1T}>
                  登录签到<Text style={listStyles.r1TSub}>(1天)</Text>
                </Text>
              </LinearGradient>
              <View style={listStyles.r1BWrap}>
                <Text style={listStyles.r1B}>母婴背包</Text>
                <Text style={listStyles.r1BSub}>20000积分兑换</Text>
                <Text style={listStyles.r1C}>签到领积分好礼</Text>
              </View>
            </View>
            <View style={listStyles.r2}>
              <Image
                style={listStyles.r2Bgm}
                source={require('../../assets/images/r2bgm.png')}
              />
              <LinearGradient
                colors={['#fb969a', '#fb969a11']}
                start={{ x: 0.5, y: 0.4 }}
                style={listStyles.r1TitWrap}
              >
                <Text style={listStyles.r2T}>夏日小贴士</Text>
              </LinearGradient>
            </View>
          </>
        )}
        {rightList.map((item, key) => card(item, key))}
      </View>
    </View>
  )
})
const listStyles = StyleSheet.create({
  listWrap: {
    marginTop: 12,
    marginLeft: 12,
    marginRight: 12,
    alignItems: 'flex-start',
  },
  sperate: {
    width: 12,
  },
  list: {
    flex: 1,
  },

  card: {
    borderRadius: 6,
    backgroundColor: '#fff',
  },
  r1: {
    borderRadius: 6,
    height: 84,
    marginBottom: 12,
    backgroundColor: '#fff',
    position: 'relative',
    display: 'flex',
    justifyContent: 'space-between',
    borderColor: '#fed66f',
    borderWidth: 1,
  },
  r1Img: {
    width: 60,
    height: 50,
    position: 'absolute',
    right: 6,
    bottom: 6,
    resizeMode: 'contain',
  },
  r1T: {
    fontSize: 12,
    color: '#fff',
  },
  lBgm: {
    width: '100%',
    height: '100%',
  },
  r1C: {
    fontSize: 12,
    color: '#d5a020',
  },
  r1TSub: {
    fontSize: 10,
    color: '#fff',
  },
  r1TitWrap: {
    paddingLeft: 10,
    paddingTop: 4,
    paddingBottom: 4,
    borderTopRightRadius: 5,
    borderTopLeftRadius: 5,
  },
  r1B: {
    fontSize: 14,
    color: '#333',
    paddingBottom: 2,
  },
  r1BSub: {
    fontSize: 10,
    color: '#666',
  },
  r2: {
    borderRadius: 6,
    marginBottom: 12,
    height: 84,
    backgroundColor: '#fff',
    position: 'relative',
    borderWidth: 1,
    borderColor: '#fb969a',
  },
  r2Bgm: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    left: 0,
    top: 0,
    resizeMode: 'cover',
    borderRadius: 6,
  },
  r2T: {
    paddingTop: 4,
    color: '#fff',
    paddingBottom: 4,
    fontSize: 14,
  },
  r1BWrap: {
    paddingLeft: 10,
    paddingBottom: 6,
  },
})
